<script>
const defaultStyle='position: absolute;user-select: none;cursor: pointer;right: 5px;z-index: 2;top:10px;'
export default {
  name: "PasswordInput",
  emits:['update:modelValue','change'],
  props:{
    modelValue: String
  },
  data(){
    return {
      inputType:'password',
      className:'jeicon-eye-o',
      style:defaultStyle+'font-size: 12px;'
    }
  },
  methods:{
    onClick(){
      if(this.inputType==='password'){
        this.inputType='text'
        this.className='jeicon-eye-close'
        this.style=defaultStyle
      }else{
        this.inputType='password'
        this.className='jeicon-eye-o'
        this.style=defaultStyle+'font-size: 12px;'
      }
    },
    onChange(v){
      this.$emit('update:modelValue',v.target.value)
      this.$emit('change',v.target.value)
    }
  }
}
</script>

<template>
  <div class="h-input h-input-suffix-icon" style="position: relative;">
    <Input :type="inputType" v-model="$props.modelValue"  @change="onChange"/>
    <i :class="className" :style="style" @click="onClick"></i>
  </div>
</template>
